<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="fullName='李 四四'">修改名字</button>
      <p>姓:{{firstName}}</p>
      <p>名:{{lastName}}</p>
      <p>姓名是:{{fullName}}</p>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三三",
          };
        },
        computed: {
          /* 
            如果一个计算属性只需要读取其中的值,则直接定义这个计算属性是一个函数即可
          */
          /* fullName() {
            return this.firstName + " " + this.lastName;
          }, */

          /* 
            如果一个计算属性需要可读可写,则这个计算属性是一个对象,包含set和get方法
            当计算属性被读的时候,就会调用get方法,需要return一个值作为最终值
            当计算属性被写的时候,就会调用set方法,接受一个参数,就是被设置的值
          */
          fullName: {
            set(newVal) {
              console.log("set", newVal);
              this.firstName = newVal.split(" ")[0];
              this.lastName = newVal.split(" ")[1];
            },
            get() {
              console.log("get");
              return this.firstName + " " + this.lastName;
            },
          },
        },
      });
    </script>
  </body>
</html>
